<template>
  <div style="height:100%;width:100%;position:relative;overflow: hidden;">
      <div class="pagetop">
          <template>
              <div style="width:100%">
                  <div style="float:left;width:100%;">
                      <table style="float:right">
                          <tr>
                              <td style="align:right">
                                  <el-button icon="el-icon-search" type="primary" @click="QueryList()" v-has="'PINQUERY'" :disabled="changeflag">查询</el-button>
                              </td>
                              <td style="align:left">
                                  <el-button icon="el-icon-plus" @click="MainOpenDialog(1)" v-has="'PADD'" :disabled="changeflag">新增</el-button>
                              </td>
                              <td style="align:left">
                                  <el-button icon="el-icon-delete" @click="MainOpenDialog(2)" v-has="'PDELETE'" :disabled="changeflag">删除</el-button>
                              </td>
                              <td style="align:left">
                                  <el-button icon="el-icon-document" @click="MainOpenDialog(3)" v-has="'PDELETE'" :disabled="!changeflag">保存</el-button>
                              </td>
                              <td style="align:left">
                                  <el-button icon="el-icon-close" @click="MainOpenDialog(4)" v-has="'PDELETE'" :disabled="!changeflag">取消</el-button>
                              </td>
                              <td style="align:left">
                                  <el-button icon="el-icon-document" @click="MainOpenDialog(5)" v-has="'PDELETE'" :disabled="changeflag">导出</el-button>
                              </td>
                              <td>
                                  <el-button icon="el-icon-files" @click="ImportCsv" ref="importFile">导入</el-button>
                                  <div class="upload-button">
                                      <el-upload ref="upload" :action="url" accept=".dat" :before-upload="beforeUploadFile" :on-change="fileChange" :show-file-list="showFile" :data="updata" :http-request="uploadOpt">
                                          <el-button size="small" plain>选择文件</el-button>
                                          <!-- <div slot="tip" class="el-upload__tip">只能上传DAT(*dat)文件，且不超过10M</div> -->
                                      </el-upload>
                                  </div>
                              </td>
                          </tr>
                      </table>
                  </div>
              </div>
          </template>
      </div>
      <div class="pagecenter">
          <div class="middle-center">
              <vxe-table show-overflow ref="lxTable" :data.sync="colonykindData" height="auto" :loading="colonykindLoading" :sort-config="{trigger: 'cell'}" :keyboard-config="keyConfig" :keyboard-local-config="keyLocalConfig" border size="mini" show-header-overflow highlight-current-row resizable header-align="center" :row-class-name="rowClassName" @current-change="CurrentChangeEvent">
                  <vxe-table-column field="colonykindno" title="特征类别代码" width="120px"></vxe-table-column>
                  <vxe-table-column field="colonykindname" title="特征类别名称" width="160px"></vxe-table-column>
                  <vxe-table-column field="multiresults" title="多选" width="60px" align="center">
                      <template v-slot="{ row }">
                          <div v-if="row.multiresults == '1'">是</div>
                          <div v-else></div>
                      </template>
                  </vxe-table-column>
                  <vxe-table-column field="inputcode" title="输入码" width="100px"></vxe-table-column>
                  <vxe-table-column field="seq" title="序号" width="80px"></vxe-table-column>
              </vxe-table>
          </div>
          <div class="middle-right">
              <div style="border:1px solid #ccc;width:100%">
                  <table class="QueryTable" style="width:100%">
                      <tr>
                          <td style="color:blue;text-align: right; ">特征类别代码</td>
                          <td>
                              <el-input v-model="colonykind.colonykindno" placeholder="" ref="input11" @keyup.enter.native="$refs.input12.focus()" :disabled="isdisabeld"></el-input>
                          </td>
                          <td style="text-align:left;width:120px">
                              <el-checkbox v-model="colonykind.multiresults" true-label="1" false-label="0" @change="hasChange">多选</el-checkbox>
                          </td>
                      </tr>
                      <tr>
                          <td style="text-align: right; ">特征类别名称</td>
                          <td>
                              <el-input v-model="colonykind.colonykindname" placeholder="" @input="hasChange" @change="nameChange" ref="input12" @keyup.enter.native="$refs.input13.focus()"></el-input>
                          </td>
                      </tr>
                      <tr>
                          <td style="text-align: right; ">输入码</td>
                          <td>
                              <el-input v-model="colonykind.inputcode" placeholder="" @input="hasChange" ref="input13" @keyup.enter.native="$refs.input14.focus()"></el-input>
                          </td>
                      </tr>
                      <tr>
                          <td style="text-align: right; ">序号</td>
                          <td>
                              <el-input v-model="colonykind.seq" placeholder="" @input="hasChange" ref="input14"></el-input>
                          </td>

                      </tr>
                  </table>
              </div>
              <div style="height:calc(100% - 115px)">
                  <vxe-table show-overflow ref="rxTable" :data.sync="colonyresultData" height="auto" :loading="colonyresultLoading" :keyboard-config="keyConfig" :keyboard-local-config="keyLocalConfig" :edit-config="{trigger: 'click',mode: 'cell',showStatus: true,showIcon: false }" border size="mini" show-header-overflow highlight-current-row highlight-hover-row resizable header-align="center" @edit-closed="EditClose">
                      <vxe-table-column type="index" title="NO." width="60" align="center"></vxe-table-column>
                      <vxe-table-column field="colonyresultno" title="特征结果代码" width="100" :edit-render="{name: 'input', events: {change: hasChange}}" sortable></vxe-table-column>
                      <vxe-table-column field="colonyresult" title="特征结果名称" width="100" :edit-render="{name: 'input', events: {change: hasChange}}" sortable></vxe-table-column>
                      <vxe-table-column field="inputcode" title="输入码" align="center" width="100" :edit-render="{name: 'input', events: {change: hasChange}}" sortable></vxe-table-column>
                      <vxe-table-column field="posflag" title="阳性" align="center" width="80" sortable>
                          <template v-slot="{ row }">
                              <el-checkbox v-model="row.posflag" true-label="1" false-label="0" @change="hasChange"></el-checkbox>
                          </template>
                      </vxe-table-column>
                      <vxe-table-column field="seq" title="序号" align="center" width="55" :edit-render="{name: 'input', events: {change: hasChange}}" sortable></vxe-table-column>
                      <template v-slot:fix>
                          <div style="font-size:12px;padding-top:3px;background-color:#fff;text-align:center">
                              <table style="border-spacing:10px;width:100%">
                                  <tr>
                                      <td>
                                          <el-button style="background-color:#e6e6e6;color:black" @click="$refs.rxTable.insertAt({},-1),changeflag = true">新增明细</el-button>
                                      </td>
                                      <td>
                                          <el-button style="background-color:#e6e6e6;color:black" @click="$refs.rxTable.remove($refs.rxTable.getCurrentRow()),changeflag = true">删除明细</el-button>
                                      </td>
                                  </tr>
                              </table>
                          </div>
                      </template>
                  </vxe-table>
              </div>
          </div>

      </div>
  </div>
</template>

<script>
import XEUtils from "xe-utils";
import axios from "axios";
export default {
  name: "LIS841",
  data() {
      return {
          changeflag: false,
          colonykindData: [], //特征菌落数据
          colonykindLoading: false,
          colonykind: {}, //当前菌落特征
          isdisabeld: true, //特征代码可编辑标志
          colonyresultData: [], //特征结果数据
          colonyresultLoading: false,
          utype: 2,
          keyConfig: {
              isDel: true,
              isTab: true,
              isEdit: true,
          },
          keyLocalConfig: {
              isArrow: true,
          },
          AddArr: [],
          UpdateArr: [],
          multiresultsList: [
              { label: "否", value: "0" },
              { label: "是", value: "1" },
          ], //多选初始化
          form: {},
          showFile: false,
          url: "",
          updata: { action: "BACCOMMOMUPLOAD" }, 
      };
  },
  created() {
      this.InitData();
  },
  mounted() {
      this.url = this.$tool.baseUrl.replace(/api/, "z") + "fileupload";
  },
  methods: {
      InitData() {
          this.QueryList();
      },
      CurrentChangeEvent({ row }) {
          if (this.changeflag) {
              this.$refs.lxTable.setCurrentRow(this.colonykind)
              return false;
          }
          this.colonykind = XEUtils.clone(row, true);
          this.QueryResult(row.colonykindno);
      },
      rowClassName({ row, column }) {
          if (this.AddArr.length > 0 && this.AddArr.indexOf(row.colonykindno) > -1) {
              return "Add";
          }
          if (this.UpdateArr.length > 0 && this.UpdateArr.indexOf(row.colonykindno) > -1) {
              return "Update";
          }
      },
      EditClose({ row, column }) {
          if (column.property == "colonyresult") {
              row.inputcode = this.Showinputcode(row.colonyresult);
          }
      },
      hasChange() {
          this.changeflag = true;
      },
      nameChange(value) {
          this.colonykind.inputcode = this.Showinputcode(value);
      },
      //生成拼音码
      Showinputcode(value) {
          var pinyinres = this.$pinyin(value, {
              style: this.$pinyin.STYLE_FIRST_LETTER, // 首字母
              heteronym: true,
          });
          var inputcode = "";
          for (var i = 0, len = pinyinres.length; i < len; i++) {
              if (pinyinres[i].length > 1) {
                  pinyinres[i].sort();
              }
              inputcode += pinyinres[i][0];
          }
          return inputcode.toLocaleUpperCase().slice(0, 20);
      },
      QueryList() {
          this.colonykindLoading = true;
          this.$tool
              .request({
                  url: "LIS/LIS8/LIS841",
                  method: "post",
                  data: {
                      action: "querylist",
                  },
              })
              .then((res) => {
                  if (res.data) {
                      this.colonykindData = res.data;
                      if (res.data.length > 0) {
                          this.colonykind = XEUtils.clone(res.data[0], true);
                          this.$refs.lxTable.setCurrentRow(res.data[0]);
                          this.QueryResult(res.data[0].colonykindno);
                      }
                  }
                  this.colonykindLoading = false;
              })
              .catch(() => {
                  this.colonykindLoading = false;
              });
      },
      QueryResult(colonykindno) {
          this.colonyresultLoading = true;
          this.$tool
              .request({
                  url: "LIS/LIS8/LIS841",
                  method: "post",
                  data: {
                      action: "querydetail",
                      colonykindno: colonykindno,
                  },
              })
              .then((res) => {
                  if (res.data) {
                      this.colonyresultData = res.data;
                  }
                  this.colonyresultLoading = false;
              })
              .catch(() => {
                  this.colonyresultLoading = false;
              });
      },
      SaveAction(type) {
          return new Promise((s, f) => {
              this.$refs.rxTable.tableFullData = this.$refs.rxTable.tableFullData.sort((a, b) => a.seq - 0 - (b.seq - 0));
              for (let i = 0; i < this.$refs.rxTable.tableFullData.length; i++) {
                  this.$refs.rxTable.tableFullData[i].seq = (i + 1) * 10;
              }
              this.$tool
                  .request({
                      url: "LIS/LIS8/LIS841",
                      method: "post",
                      data: {
                          action: "savedata",
                          colonykind: this.colonykind,
                          colonyresult: this.$refs.rxTable.getRecordset(),
                          utype: type,
                          oldinfo: this.$refs.lxTable.getCurrentRow(),
                      },
                  })
                  .then((res) => {
                      if (res.errcode == "1") {
                          this.$message({
                              message: "保存成功",
                              type: "success",
                          });
                          this.changeflag = false;
                          if (this.utype == 1) this.AddArr.push(this.colonykind.colonykindno);
                          if (this.utype == 2) this.UpdateArr.push(this.colonykind.colonykindno);
                          if (this.utype == 3) {
                              this.UpdateArr = this.UpdateArr.filter((item) => item.colonykindno != this.colonykind.colonykindno);
                              this.AddArr = this.AddArr.filter((item) => item.colonykindno != this.colonykind.colonykindno);
                          }
                          s(this.colonykind);
                      } else {
                          this.$alert(res.errmsg, "错误");
                          f();
                      }
                  })
                  .catch(() => {
                      f();
                  });
          });
      },
      //按钮点击事件 type=1 新增 =2删除 =3保存 =4取消 =5导出
      MainOpenDialog(type) {
          if (type == 1) {
              this.colonykind = { colonykindno: "", colonykindname: "", seq: "", inputcode: "" };
              this.isdisabeld = false;
              this.changeflag = true;
              this.utype = 1;
              this.QueryResult();
          }
          if (type == 2) {
              this.colonykind=this.$refs.lxTable.getCurrentRow();
              var index = this.$refs.lxTable.getRowIndex(this.$refs.lxTable.getCurrentRow());
              this.$confirm("是否确定删除菌落特征【" + this.colonykind.colonykindname + "】", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  focusCancelButton: true,
                  closeOnClickModal: false,
                  type: "warning",
              }).then(() => {
                  this.SaveAction(3).then(() => {
                      this.colonykindData.splice(index, 1);
                      this.$refs.lxTable.loadData(this.colonykindData).then(() => {
                          if (index >= 1) index = index - 0 - 1;
                          var nowrow = this.$refs.lxTable.getData(index);
                          this.colonykind = XEUtils.clone(nowrow, true);
                          this.$refs.lxTable.setCurrentRow(nowrow);
                          this.QueryResult(nowrow.colonykindno);
                      });
                  });
              });
          }
          if (type == 3) {
              this.SaveAction(this.utype).then((res) => {
                  if (this.utype == 1) {
                      this.colonykindData.push(res);
                      this.$refs.lxTable.loadData(this.colonykindData).then(() => {
                          this.$refs.lxTable.setCurrentRow(res);
                          this.QueryResult(res.colonykindno);
                          this.utype = 2;
                      });
                  } else {
                      var row = this.colonykindData.filter((item) => item._XID == res._XID)[0];
                      var index = this.colonykindData.indexOf(row);
                      this.colonykindData[index] = XEUtils.clone(res, true);
                      this.$refs.lxTable.loadData(this.colonykindData).then(() => {
                          this.$refs.lxTable.setCurrentRow(res);
                          this.QueryResult(res.colonykindno);
                          this.utype = 2;
                      });
                  }
              });
          }
          if (type == 4) {
              this.utype = 2;
              this.colonykind = XEUtils.clone(this.$refs.lxTable.getCurrentRow(), true);
              this.changeflag = false;
              this.isdisabeld = true;
              this.QueryResult(this.colonykind.colonykindno);
          }
          if (type == 5) {
              this.Export();
          }
      },
      //导出
      Export() {
          let p = { prgno: "LIS841" };
          this.$pub.commexport(this, p, `菌落特征.dat`);
      },
      ImportCsv() {
          this.$refs["upload"].$refs["upload-inner"].handleClick();
      },
      // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
      beforeUploadFile(file) {
          let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
          let size = file.size / 1024 / 1024;
          if (extension !== "dat") {
              this.$notify.warning({
                  title: "警告",
                  message: `只能上传DAT(*dat)文件，且不超过10M`,
              });
          }
          if (size > 10) {
              this.$notify.warning({
                  title: "警告",
                  message: `文件大小不得超过10M`,
              });
          }
      },
      uploadOpt(content) {
          let formData = new FormData();
          formData.append("action", "BACCOMMOMUPLOAD");
          formData.append("file", content.file);
          this.$pub.uploadFileOpt(this, formData, "QueryList");
      },
      // 文件状态改变时的钩子
      fileChange(file, fileList) {
          this.form.file = file.raw;
      },
  },
};
</script>

<style scoped>
/deep/.Update {
  color: #5050fa;
}
/deep/.Add {
  color: #b47c7c;
}
/deep/ .el-button.is-disabled {
  border: 0px;
  color: grey;
  background-color: #e6e6e6;
  font-weight: normal;
}
.pagetop {
  left: 0;
  right: 0;
  height: 36px;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  border: solid 1px #ccc;
  position: absolute;
  z-index: 99;
}
.pagecenter {
  position: absolute;
  top: 40px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}
.middle-center {
  position: absolute;
  height: 100%;
  right: 605px;
  left: 0;
}

.middle-right {
  position: absolute;
  top: 0;
  bottom: 2px;
  overflow: hidden;
  width: 600px;
  right: 0px;
}
.QueryTable tr td:nth-child(odd) {
  text-align: right;
  white-space: nowrap;
  font-size: 12px;
  width: 80px;
  font-weight: bold;
}
.upload-button {
  height: 24px;
  margin: 0 10px;
  display: none;
}
.upload-button div {
  height: 24px;
}
</style>
